<template>
  <view class="goods_tabs">
      <view
        v-for="(item, index) in tabsData"
        :key="item.id"
        class="tabs_item"
        :class="activeIndex === index ? 'active' : ''"
        @tap="changeIndex(index)"
        >{{ item.text }}</view
      >
    </view>
</template>

<script>
export default {
    props:["tabsData"],
    data(){
        return{
            activeIndex: 0
        }
    },
    methods:{
      changeIndex(index){
        this.activeIndex = index
        this.$emit("getIndex",index)
      }
    }
}
</script>

<style lang="less" scoped>
.goods_tabs {
  display: flex;
  justify-content: space-evenly;
  height: 88rpx;
  .tabs_item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 184rpx;
    font-size: 30rpx;
    color: #676767;
    border-bottom: 3px solid transparent;
    &.active {
      border-bottom-color:#ea4350;
      color: #3d3d3d;
      font-weight: bold;
    }
  }
}
</style>